<div class="button-container">
  <button mat-mini-fab [color]="!this.addMode ? 'primary': 'warn'" aria-label="Click to add mode to add a new annotation (when mode active, click in slicers)" (click)="addModeToggle()" >
    <mat-icon>add</mat-icon>
  </button>
</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">{{element.id}}</td>
  </ng-container>

  <ng-container matColumnDef="Title">
    <th mat-header-cell *matHeaderCellDef>Description</th>
    <td mat-cell *matCellDef="let element">{{element.Title}}</td>
  </ng-container>

  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef>Delete</th>
    <td mat-cell *matCellDef="let element">        
      <div class="button-container">
        <button mat-mini-fab [color]="!element.hide ? 'primary': 'basic'" aria-label="Delete annotation" (click)="sendDelete(element.id)">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
  </ng-container>

  <ng-container matColumnDef="jump">
    <th mat-header-cell *matHeaderCellDef>Jump</th>
    <td mat-cell *matCellDef="let element">        
      <div class="button-container">
        <button mat-mini-fab [color]="!element.hide ? 'primary': 'basic'" aria-label="Jump to annotation" (click)="sendSelect(element.id)">
          <mat-icon>home</mat-icon>
        </button>
      </div>
  </ng-container>

  <ng-container matColumnDef="edit">
    <th mat-header-cell *matHeaderCellDef>Edit</th>
    <td mat-cell *matCellDef="let element">        
      <div class="button-container">
        <button mat-mini-fab [color]="!element.hide ? 'primary': 'basic'" aria-label="Edit annotation (name)" (click)="openDialog(element.id)">
          <mat-icon>edit</mat-icon>
        </button>
      </div>
  </ng-container>

  <ng-container matColumnDef="hide">
    <th mat-header-cell *matHeaderCellDef>Show</th>
    <td mat-cell *matCellDef="let element">        
      <div class="button-container">
        <button mat-mini-fab [color]="!element.hide ? 'primary': 'basic'" aria-label="Show or hide annotation" (click)="hideAnnotation(element.id)">
          <mat-icon>{{element.hide ? 'check_box_outline_blank': 'check_box'}}</mat-icon>
        </button>
      </div>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
      mat-row
      [class.demo-row-is-clicked]="selectedID == row.id"
      *matRowDef="let row; columns: displayedColumns;"
  ></tr>
</table>




<!-- Copyright 2022 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->